<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-row :gutter="20">
            <el-col :span="6" style="margin-top: 20px ;padding-left: 30px"><i class="el-icon-s-flag" style="font-size: 30px"/></el-col>
            <el-col :span="18" style="margin-top: 23px">订单数: 999+</el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-row :gutter="20">
            <el-col :span="6" style="margin-top: 20px;padding-left: 30px"><i class="el-icon-s-comment" style="font-size: 30px"/></el-col>
            <el-col :span="18" style="margin-top: 23px">消息: 999+</el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-row :gutter="20">
            <el-col :span="6" style="margin-top: 20px;padding-left: 30px"><i class="el-icon-s-shop" style="font-size: 30px"/></el-col>
            <el-col :span="18" style="margin-top: 23px">服务数: 999+</el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-row :gutter="20">
            <el-col :span="6" style="margin-top: 20px;padding-left: 30px"><i class="el-icon-s-finance" style="font-size: 30px"/></el-col>
            <el-col :span="18" style="margin-top: 23px">金额: 9999999+</el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-card class="box-card">
      <el-row :gutter="40">
        <el-col :span="10">
          <p>服务审核:</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="70" style="margin-top: 20px"></el-progress>
          <p style="margin-top: 20px">评论审核:</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="100" status="success" style="margin-top: 20px"></el-progress>
          <p style="margin-top: 20px">支付宝支付:</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning" style="margin-top: 20px"></el-progress>
          <p style="margin-top: 20px">微信支付:</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="20" status="exception" style="margin-top: 20px"></el-progress>
          <p style="margin-top: 20px">第三方支付:</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="20" status="exception" style="margin-top: 20px"></el-progress>
        </el-col>
        <el-col :span="10" style="float:right;">
          <p>待支付:</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="18" style="margin-top: 20px"></el-progress>
          <p style="margin-top: 20px">待确认:</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="56" status="success" style="margin-top: 20px"></el-progress>
          <p style="margin-top: 20px">待服务:</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="60" status="warning" style="margin-top: 20px"></el-progress>
          <p style="margin-top: 20px">已取消:</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="16" status="exception" style="margin-top: 20px"></el-progress>
          <p style="margin-top: 20px">已完成:</p>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="88" status="exception" style="margin-top: 20px"></el-progress>
        </el-col>
      </el-row>


    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item:{
        url:'https://img0.baidu.com/it/u=3315768614,1979114063&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1681923600&t=cca8fc6767a51fe920724942510e5597'
      }
    };
  },
  methods: {

  }
}
</script>

<style scoped>
/*布局容器属性*/
.el-row {
  margin-bottom: 20px;

&
:last-child {
  margin-bottom: 0;
}

}
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #F2F6FC;
  height: 68px;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/*--------------------*/

/*卡片组件的属性*/
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  height: auto;
  margin-top: 50px;
}
.box-card  el-progress{
  
  margin-top: 10px;
}
/*--------------------*/

/*走马灯属性*/
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
/*------------------*/
</style>